<template>
  <div class="app-container">
    <div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="medium"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="查评事件" prop="eventTitle">
          <el-select
            ref="optionsRef"
            v-model="queryParams.eventTitle"
            class="full-width-input autoWidth"
            multiple
            filterable
            collapse-tags
          >
            <el-option
              v-for="option in reviewEventsOptionsList"
              :key="option.review_events_id"
              :label="option.review_events"
              :value="option.review_events_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="受评单位" prop="reviewUnit">
          <el-select
            multiple
            filterable
            collapse-tags
            v-model="queryParams.reviewUnit"
            class="full-width-input autoWidth"
          >
            <el-option-group
              v-for="group in unitOptions"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.data"
                :key="item.deptName"
                :label="item.deptName"
                :value="item.deptName"
              >
              </el-option>
            </el-option-group>
            <!-- <el-option
              v-for="option in deptOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="事件类型" prop="reviewClassify">
          <el-select
            v-model="queryParams.reviewClassify"
            class="full-width-input"
            clearable
          >
            <el-option
              v-for="(item, index) in type"
              :key="index"
              :label="item.dict_label"
              :value="item.dict_label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人" prop="createBy">
          <el-input
            v-model="queryParams.createBy"
            placeholder="请输入创建人"
            clearable
            @keyup.enter.native="handleQuery"
            @input="changeMessage()"
          />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
          >
          <el-button
            ref="btn1"
            size="mini"
            type="warning"
            @click="handleAllChekTab"
          >全选</el-button
          >
        </el-form-item>
      </el-form>
      <!-- @mouseenter="onStop"
        @mouseleave="onStart" -->
      <div
        @mouseenter="onStop"
        @mouseleave="onStart"
        style="position: relative"
        class="card-content"
        ref="box"
      >
      <span
        v-if="iconFlag"
        @click="leftTab"
        style="
          position: absolute;
          left: 0px;
          top: 45%;
          z-index: 1;
          width: 40px;
          height: 40px;
          background: #ccc;
          border-radius: 50%;
          line-height: 40px;
          text-align: center;
        "
      ><i class="el-icon-arrow-left"></i
      ></span>
        <span
          v-if="iconFlag"
          @click="rightTab"
          style="
          position: absolute;
          z-index: 1;
          right: 0px;
          top: 45%;
          width: 40px;
          height: 40px;
          background: #ccc;
          border-radius: 50%;
          line-height: 40px;
          text-align: center;
        "
        ><i class="el-icon-arrow-right"></i
        ></span>
        <el-row
          :gutter="20"
          v-loading="loading"
          style="
          width: 100%;
          height: 220px;
          display: flex;
          align-items: center;
          overflow: hidden;
        "
        >
          <el-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="5"
            :style="`will-change: transform; transform: translateX(${-left1}px); `"
            v-for="(item, key) in reviewEventsOptionSearch"
            :key="key"
            @click.native="handleAllChek(item)"
          >
            <el-card
              id="el-card-index"
              :class="
              item.reviewClassify === '消防能力评估标准'
                ? 'update-log1'
                : 'update-log2'
            "
              :style="
              item.status == true ? 'border:2px solid rgba(63,158,255,1)' : ''
            "
            >
            <span style="font-weight: bold; font-size: 18px; display: none">{{
                item.id
              }}</span>
              <div slot="header" class="clearfix" style="position: relative">
                <el-button
                  :class="
                  item.reviewClassify === '消防能力评估标准'
                    ? 'color1'
                    : 'color2'
                "
                  type="success"
                  style="
                  float: left;
                  border-radius: 18px;
                  padding: 7px 10px;
                  font-size: 12px;
                  border: none;
                "
                >
                  <img
                    style="
                    width: 15px;
                    height: 15px;
                    display: inline-block;
                    vertical-align: middle;
                  "
                    :src="
                    item.reviewClassify === '消防能力评估标准' ? url1 : url2
                  "
                    alt=""
                  />
                  {{
                    item.reviewClassify === "消防能力评估标准"
                      ? "消防事件"
                      : "应急事件"
                  }}</el-button
                >
                <el-checkbox
                  v-model="item.status"
                  @change="handleCheckedCitiesChange(item)"
                  style="float: right; margin-left: 10px"
                ></el-checkbox>
                <div style="float: right; width: 50%; font-size: 12px">
                  <span>任务进度</span>
                  <span
                    style="float: right"
                    :class="
                    item.reviewCount === item.Count
                      ? 'numColor1'
                      : item.num === 0
                      ? 'numColor3'
                      : 'numColor2'
                  "
                  >{{
                      item.reviewCount === item.Count
                        ? "已完成"
                        : item.num === 0
                          ? "未开始"
                          : item.reviewCount + "/" + item.Count
                    }}</span
                  >
                  <el-progress
                    style="margin-top: 5px"
                    :percentage="item.num"
                    text-inside
                    :color="getColor(item.num)"
                    :show-text="false"
                  ></el-progress>
                </div>
              </div>
              <div
                slot="header"
                class="clearfix"
                style="margin-top: 2.2%; height: 68px"
              >
              <span
                style="
                  font-family: PingFangSC-Medium;
                  font-size: 16px;
                  color: #000000;
                  line-height: 34px;
                  font-weight: 500;
                "
              >{{ item.eventTitle }}</span
              >
              </div>
              <div
                class="body"
                style="
                display: flex;
                font-size: 10px;
                height: 50px;
                color: #5c6373;
                line-height: 50px;
                font-weight: 400;
                white-space: nowrap;
              "
              >
                <div style="text-align: left; flex: 1">
                <span
                  style="
                    text-align: left;
                    display: inline-block;
                    height: 30px;
                    line-height: 30px;
                  "
                ><img
                  style="
                      width: 10.5px;
                      display: inline-block;
                      vertical-align: middle;
                    "
                  src="@/assets/images/time.png"
                  alt=""
                />
                  创建时间：{{ item.CREATE_TIME }}</span
                >
                </div>
                <div style="text-align: right">
                <span
                  style="
                    text-align: right;
                    display: inline-block;
                    height: 30px;
                    line-height: 30px;
                  "
                ><img
                  style="
                      width: 10.5px;
                      display: inline-block;
                      vertical-align: middle;
                    "
                  src="@/assets/images/personnel.png"
                  alt=""
                />
                  创建人：{{ item.CREATE_BY }}</span
                >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <el-carousel
        indicator-position="outside"
        :autoplay="false"
        ref="carousel"
        @change="bidPlayChange"
      >
        <el-carousel-item>
          <div class="container">
            <div
              ref="chinaMapChart"
              id="chinaMapChart"
              style="width: 100%; height: 500px"
            ></div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="container_pie">
            <div
              ref="chinaMapChart_pie"
              id="chinaMapChart_pie"
              style="width: 100%; height: 500px"
            ></div>
          </div>
        </el-carousel-item>
      </el-carousel>

      <!-- <span v-if="tableFlag">受评单位：{{ evaluateObject }}</span> -->
      <el-table
        v-if="tableFlag"
        :data="problemList"
        :row-class-name="tableRowClassName"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'left' }"
        style="width: 100%"
        height="900"
        class="tableIndex"
      >
        <el-table-column label="序号" width="90">
          <div slot-scope="a">
            {{ a.$index + 1 }}
          </div>
        </el-table-column>
        <el-table-column
          prop="evaluationElements"
          sortable
          label="评估项目"
          width="100"
        >
        </el-table-column>
        <el-table-column prop="problem" label="发现问题"> </el-table-column>
        <el-table-column prop="rectifySuggest" label="整改建议">
        </el-table-column>
        <el-table-column
          sortable
          prop="standardScore"
          label="应得分"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="score"
          label="实得分"
          sortable
          width="90"
        ></el-table-column>
        <el-table-column prop="deduct" label="扣分" sortable width="90">
        </el-table-column>
        <el-table-column prop="deductPursuant" label="扣分依据">
        </el-table-column>
        <el-table-column prop="isGreatProblem" label="重大问题（√）" width="120">
        </el-table-column>
      </el-table>
      <!-- <h2 style="margin: 160px auto; font-size: 50px; color: #407aed; font-weight: bold;">您好，欢迎使用消防应急能力评审系统！</h2> -->
      <!-- <div class="cotainer_box1">
      </div>

        <div class="cotainer_VIP">
          <span>培训通知</span>
        </div>
        <el-table :data="tableData" style="width: 100%; height: calc(100% - 40px);">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </div>
      <div class="cotainer_box2">
        <div style="float: left;font-size: 15px">个人收藏应用</div>
        <div style="float: right;font-size: 15px">更多+</div>
        <div class="cotainer_box2_box">
          <ul>
            <li>
              <i class="el-icon-folder-opened"></i>
              <p>岗位人员</p>
            </li>
            <li>
              <i class="el-icon-folder-opened"></i>
              <p>岗位人员</p>
            </li>
            <li>
              <i class="el-icon-folder-opened"></i>
              <p>岗位人员</p>
            </li>
            <li>
              <i class="el-icon-folder-opened"></i>
              <p>岗位人员</p>
            </li>
            <li>
              <i class="el-icon-folder-opened"></i>
              <p>岗位人员</p>
            </li> <li>
            <i class="el-icon-folder-opened"></i>
            <p>岗位人员</p>
          </li>
            <li>
              <i class="el-icon-folder-opened"></i>
              <p>岗位人员</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="cotainer_box1">
        <div class="cotainer_VIP">
          <span>培训通知</span>
        </div>
        <el-table :data="tableData" style="width: 100%; height: calc(100% - 40px);">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </div>
      <div class="cotainer_box2">
        <i class="el-icon-date" style="color: #cbcccc">2023-6-5   星期一</i>
        <div class="cotainer_box2_box1"></div>
      </div> -->
    </div>
    <h2 hidden style="text-align: center;margin: 160px auto; font-size: 50px; color: #407aed; font-weight: bold;">您好，欢迎使用消防和应急能力评审系统！</h2>
  </div>
</template>

<script>
import { listEventNew, statistics, queryDept } from "@/api/system/review/event";
import { getReviewEvents, getDict } from "@/api/system/review/groping";
import * as echarts from "echarts";
import Vue from "vue";

export default {
  name: "Index",
  data() {
    return {
      url1: require("@/assets/images/fire.png"),
      url2: require("@/assets/images/urgent.png"),
      notice: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 57,
        createBy: undefined,
        eventTitle: undefined,
        reviewClassify: undefined,
        dateRange: [],
        eventId: "",
        reviewUnit: undefined,
      },
      currentPage: null,
      dateRange: [],
      // 遮罩层
      loading: true,
      reviewEventsOptionSearch: [],
      reviewEventsOptionsList: [],
      optionsList: [],
      ids: null,
      dataStat: null,
      checkId: "",
      chekAllIds: "",
      reviewEventsListTotal: null,
      announcemenTimer: null,
      announcemenIndex: 0,
      type: [], //事件类型选项

      problemList: [],
      play: false,
      timer: 0,
      box: null,
      pageSize11: 5,
      left1: 0,
      fpsRaf: null, // fps回调标识
      moveRaf: null, // 一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义
      start: 0,
      end: 0,
      step: 1, // 默认移动参数（120fps: 0.5, 60fps: 1）
      amount: 4,
      iconFlag: false,
      checked1: false,
      deptOptions: [],
      unitOptions: [],
      evaluateObject: "",
      xIndex: "",
      idsa: "",
      tableFlag: false,
      isLock: false, // 控制按钮
    };
  },
  created() {
    this.fetchReviewEventsData();
    this.listEventNew();
    this.getDict();
    setTimeout(() => {
      this.getReviewEventsById();
    }, 1000);
    this.fpsRaf = requestAnimationFrame(this.getFPS);
    this.queryDept();
  },
  mounted() {
    // this.listEventNew()
    // this.getReviewEventsById()
  },
  computed: {
    width() {
      // 滚动文字每条的固定宽度
      return Math.floor(168 * this.reviewEventsListTotal);
    },
  },
  methods: {
    getFPS(timestamp) {
      // 单位ms，用1000ms/两个时间的间隔≈刷新频率fps
      if (this.fpsRaf === 2) {
        this.start = timestamp;
      }
      if (this.fpsRaf === 3) {
        this.end = timestamp;
        // 计算屏幕刷新率
        const fps = Math.floor(1000 / (this.end - this.start));
        if (fps === 120) {
          this.step = 0.5;
        }
      }
      this.fpsRaf = requestAnimationFrame(this.getFPS);
      if (this.fpsRaf > 3) {
        cancelAnimationFrame(this.fpsRaf);
        this.onStart();
      }
    },
    onClick(title) {
      // 通知父组件点击的标题
      this.$emit("click", title);
    },
    onStop() {
      // 暂停动画
      cancelAnimationFrame(this.moveRaf);
      this.iconFlag = true;
    },
    onStart() {
      // 开始动画
      this.iconFlag = false;
      let rewLength = JSON.parse(
        sessionStorage.getItem("reviewEventsOptionSearch")
      );
      if (rewLength.length > this.amount) {
        // 超过amount条开始滚动
        this.moveRaf = requestAnimationFrame(this.moveLeft);
      }
    },
    moveLeft() {
      let rewLength = JSON.parse(
        sessionStorage.getItem("reviewEventsOptionSearch")
      );
      if (this.left1 >= this.width) {
        rewLength.push(rewLength.shift()); // 将第一条数据放到最后
        this.left1 = 0;
      } else {
        this.left1 += this.step; // 每次移动step（px）
      }
      this.moveRaf = requestAnimationFrame(this.moveLeft);
    },
    leftTab() {
      if (this.left1 < 0) {
        return;
      } else {
        this.left1 -= 100;
      }
    },
    rightTab() {
      this.left1 += 100;
    },
    // 受评单位
    queryDept() {
      let name = this.$store.state.user.name;
      queryDept(name).then((row) => {
        let a = row.其他;
        let b = row.新能源;
        let c = row.水电;
        let d = row.火电;
        let arr = {
          label: "其他",
          data: a,
        };
        let arr2 = {
          label: "新能源",
          data: b,
        };
        let arr3 = {
          label: "水电",
          data: c,
        };
        let arr4 = {
          label: "火电",
          data: d,
        };
        this.unitOptions.push(arr, arr2, arr3, arr4);

        // this.deptOptions = [];
        // this.unitOptions = row
        // row.forEach((item) => {
        //   this.deptOptions.push({
        //     label: item.deptName,
        //     value: item.deptName,
        //   });
        // });
      });
    },
    // 表单重置
    // reset() {
    //   this.form = {
    //     createBy: undefined,
    //     eventTitle: undefined,
    //     reviewClassify: undefined,
    //     dateRange: [],
    //     eventId:'',
    //   };
    //   this.resetForm("form");
    // },
    initChart(data) {
      var myChart = echarts.init(this.$refs.chinaMapChart);
      // this.$refs.chinaMapChart.css( 'width', this.$refs.chinaMapChart.width());
      var option;
      option = {
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: data.dimensions,
          source: data.source,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0,
            rotate: 10,
            // formatter:function(value){
            //   return "<span>value</span>"
            // }
          },
        },
        yAxis: {},
        color: ["#fac858", "#ee6666", "#5B8FF9", "#5AD8A6"],
        series: [
          {
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              color: "rgba(91,143,249,0.85)",
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //顶部显示
                  formatter: function (params) {
                    return params.seriesName + ":" + params.value.发现问题;
                  },
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: this.fontSizehandle(3),
                  },
                },
              },
            },
          },
          {
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              color: "rgba(90,216,166,0.85)",
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //顶部显示
                  formatter: function (params) {
                    return params.seriesName + ":" + params.value.重大问题;
                  },
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: this.fontSizehandle(3),
                  },
                },
              },
            },
          },
          {
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              color: "rgba(93,112,146,0.85)",
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //顶部显示
                  formatter: function (params) {
                    return params.seriesName + ":" + params.value.总条数;
                  },
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: this.fontSizehandle(3),
                  },
                },
              },
            },
          },
          {
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              color: "rgba(93,112,146,0.85)",
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //顶部显示
                  formatter: function (params) {
                    return params.seriesName + ":" + params.value.标准分;
                  },
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: this.fontSizehandle(3),
                  },
                },
              },
            },
          },
          {
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              color: "rgba(93,112,146,0.85)",
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //顶部显示
                  formatter: function (params) {
                    return params.seriesName + ":" + params.value.应得分;
                  },
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: this.fontSizehandle(3),
                  },
                },
              },
            },
          },
          {
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //顶部显示
                  formatter: function (params) {
                    return params.seriesName + ":" + params.value.实得分;
                  },
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: this.fontSizehandle(3),
                  },
                },
              },
            },
          },
          {
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //顶部显示
                  formatter: function (params) {
                    return params.seriesName + ":" + params.value.扣分;
                  },
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: this.fontSizehandle(3),
                  },
                },
              },
            },
          },
          {
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //顶部显示
                  formatter: function (params) {
                    return params.seriesName + ":" + params.value.得分率;
                  },
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: this.fontSizehandle(3),
                  },
                },
              },
            },
          },
        ],
      };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.off("click");
      myChart.getZr().off("click");
      this.idsa = this.dataStat.ids.split(",");
      myChart.getZr().on("click", (params) => {
        if (this.isLock == false) {
          let pointInPixel = [params.offsetX, params.offsetY];
          if (myChart.containPixel("grid", pointInPixel)) {
            this.xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [
              params.offsetX,
              params.offsetY,
            ])[0];
            this.getReviewEventsById1(this.idsa[this.xIndex]);
            this.tableFlag = true;
            this.isLock = true;
            setTimeout(() => {
              this.isLock = false;
            }, 2000);
          }
        }
      });
    },
    initChartPie() {
      var myChart = echarts.init(this.$refs.chinaMapChart_pie);
      var option;

      option = {
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    bidPlayChange(index) {
      this.currentPage = index;
      // this.dataStat.ids = ''
      this.listEventNew()
      this.getReviewEventsById()
      console.log(index, this.dataStat);
    },
    // onStopViews() {
    //   this.chart = true;
    // },
    // onStartViews() {
    //   // 开始动画
    //   this.chart = false;
    // },
    // rightNext() {
    //   // debugger
    //   this.$$nextTick(()=>{
    //     this.chartsView = false;
    //   this.chartsView1 = true;
    //   })

    //   // this.initChartPie();
    // },
    // leftPrev() {},
    fontSizehandle(res) {
      let idslen = this.dataStat.ids.split(",");
      if (idslen.length > 1) {
        idslen.pop();
      }
      console.log(res, idslen);
      if (idslen.length > 2) {
        let fontSize = 6 / idslen.length;
        return res * fontSize + 3;
      }
    },

    changeMessage() {
      this.$forceUpdate();
    },
    handleQuery() {
      if (this.queryParams.eventTitle != undefined) {
        this.queryParams.eventTitle = "";
        this.queryParams.eventId = "";
        for (let i = 0; i < this.$refs.optionsRef.selected.length; i++) {
          this.queryParams.eventTitle +=
            this.$refs.optionsRef.selected[i].currentLabel + ",";

          this.queryParams.eventId +=
            this.$refs.optionsRef.selected[i].value + ",";
        }
        this.queryParams.eventTitle = this.queryParams.eventTitle.toString();
      }
      if (this.queryParams.reviewUnit != undefined) {
        // this.queryParams.reviewUnit = "";
        this.queryParams.reviewUnit = this.queryParams.reviewUnit.toString();
      }

      this.listEventNew();

      if (
        this.queryParams.eventTitle != "" &&
        this.queryParams.eventTitle != undefined
      ) {
        let eventTitleOne = this.queryParams.eventTitle.split(",");
        console.log("eventTitleOne.pop()", eventTitleOne.pop(), eventTitleOne);
        this.queryParams.eventTitle = eventTitleOne;
      }
      if (
        this.queryParams.reviewUnit != "" &&
        this.queryParams.reviewUnit != undefined
      ) {
        let reviewUnitOne = this.queryParams.reviewUnit.split(",");
        this.queryParams.reviewUnit = reviewUnitOne;
      }

      cancelAnimationFrame(this.moveRaf);
      this.left1 = 0;
    },
    /** 重置按钮操作 */
    resetQuery() {
      if (this.$refs.btn1.$el.innerText == "取消") {
        this.$refs.btn1.$el.innerText = "全选";
      }
      this.dateRange = [];
      this.queryParams = this.$options.data().queryParams;
      this.listEventNew();
      this.checkId = "";
      this.dataStat = {
        ids: "1721333326080851970",
      };
      this.tableFlag = false;
      this.getReviewEventsById();
    },
    // 卡片数据
    listEventNew() {
      listEventNew(this.addDateRange(this.queryParams, this.dateRange))
        .then((response) => {
          response.data.forEach(function (item, index, array) {
            console.log('item, index, array',item, index, array)
            Vue.set(item, "num", (item.reviewCount / item.Count) * 100);
            Vue.set(item, "status", false);
          });
          sessionStorage.setItem(
            "reviewEventsOptionSearch",
            JSON.stringify(response.data)
          );
          this.reviewEventsOptionSearch = response.data;
          this.reviewEventsListTotal = response.dataCount;
          this.loading = false;
        })
        .finally(() => {});
    },
    // 图表
    getReviewEventsById(idChe) {

      this.loading = true;
      if (idChe) {
        this.dataStat = {
          ids: idChe,
        };
      } else {
        this.dataStat = {
          ids: "1721333326080851970",
          // idn:'1'
        };
      }

      statistics(this.dataStat)
        .then((response) => {
          this.optionsList = response;
          this.loading = false;
          this.initChart(response);
          this.initChartPie();
        })
        .finally(() => {});
    },
    // 表格
    getReviewEventsById1(idChe) {
      this.loading = true;
      this.dataStat = {
        ids: idChe,
        idn: "1",
      };
      statistics(this.dataStat)
        .then((response) => {
          this.problemList = response.problemList;
          response.problemList.forEach((item, i) => {
            let score = item.standardScore - item.deduct;
            this.$set(item, "score", score);
          });
          this.loading = false;
        })
        .finally(() => {});
    },
    // 请求后台接口获取查评事件数据
    fetchReviewEventsData() {
      getReviewEvents(this.addDateRange(this.queryParams))
        .then((response) => {
          this.reviewEventsOptionsList = response.data;
          sessionStorage.setItem("pageSizeCount", response.data.length);
        })
        .finally(() => {});
    },
    // 事件类型
    getDict() {
      getDict()
        .then((response) => {
          this.type = response.data;
        })
        .finally(() => {});
    },
    handleAllChekTab() {
      for (let i = 0; i < this.reviewEventsOptionSearch.length; i++) {
        if (this.reviewEventsOptionSearch[i].status == false) {
          this.reviewEventsOptionSearch[i].status = true;
          this.$refs.btn1.$el.innerText = "取消";
          this.chekAllIds += this.reviewEventsOptionSearch[i].id + ",";
          this.getReviewEventsById(this.chekAllIds);
        } else {
          this.reviewEventsOptionSearch[i].status = false;
          this.$refs.btn1.$el.innerText = "全选";
          this.dataStat = {
            ids: "1721333326080851970",
          };
          this.getReviewEventsById(this.dataStat.ids);
        }
      }
    },
    // handleCheckedCitiesChange(item) {
    //   if (item.status == false) {
    //     Vue.set(item, "status", true);
    //     this.checkId += item.id + ",";
    //     this.getReviewEventsById(this.checkId);
    //   } else {
    //     Vue.set(item, "status", false);
    //     let checkIdNew = this.checkId.split(",");
    //     for (let i = 0; i < checkIdNew.length; i++) {
    //       if (checkIdNew[i] == item.id) {
    //         checkIdNew.splice(i, 1);
    //         this.checkId = checkIdNew.toString();
    //         this.getReviewEventsById(checkIdNew.toString());
    //       }
    //     }
    //   }
    // },
    // chek点击卡片
    handleAllChek(item) {
      if (this.currentPage == 1) {
        this.checkId += item.id + ",";
        let status = item.status;
        // this.$set(item, "status", (status = !status));
        let checkedLen = this.checkId.split(",");

        const eventList = _.filter(
          this.reviewEventsOptionSearch,
          (data) => data.id != item.id
        );
        for (let i = 0; i < this.reviewEventsOptionSearch.length; i++) {
          if (this.reviewEventsOptionSearch[i].id==item.id ) {
            // console.log('eventList[i]ii,',item,this.reviewEventsOptionSearch[i])
            status=!status
            this.$set(this.reviewEventsOptionSearch[i], "status", this.reviewEventsOptionSearch[i].status = !this.reviewEventsOptionSearch[i].status);
            break;
          } else {
            // console.log('elseeeeeeeeee')
            for (let i = 0; i < eventList.length; i++) {
              this.$set(eventList[i], "status", (status = false));

            }
          }
        }
      } else {
        let status = item.status;
        this.$set(item, "status", (status = !status));
        if (item.status == true) {
          this.checkId += item.id + ",";
          this.getReviewEventsById(this.checkId);
        } else {
          let checkIdNew = this.checkId.split(",");
          for (let i = 0; i < checkIdNew.length; i++) {
            if (checkIdNew[i] == item.id) {
              checkIdNew.splice(i, 1);
              this.checkId = checkIdNew.toString();
              this.getReviewEventsById(checkIdNew.toString());
            }
          }
        }
      }
    },
    // 修改进度条颜色
    getColor(val) {
      if (val < 100) {
        return "#FF8000";
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.isGreatProblem === "√") {
        return "warning-row";
      }
      return "";
    },
  },
};
</script>
<stytle scoped lang="scss">
</stytle>
<style>
.color1 {
  background-color: #e3f5e5 !important;
  color: #248f32;
}
.color2 {
  background-color: #fff2e5 !important;
  color: #ff8000;
}
.card-content .update-log1 {
  background-image: linear-gradient(66deg, #f1faf2 0%, #ffffff 52%);
  box-shadow: 0px 2px 20px 0px rgba(228, 232, 241, 1);
  border-radius: 12px;
}
.card-content .update-log2 {
  background-image: linear-gradient(65deg, #fff5eb 0%, #ffffff 52%);
  box-shadow: 0px 2px 20px 0px rgba(228, 232, 241, 1);
  border-radius: 12px;
}
::v-deep.el-progress-bar__innerText {
  display: none;
}
.card-content .leftBtn {
  width: 37px;
  height: 100%;
  padding: 5% 10px;
  float: left;
  background-image: linear-gradient(13deg, #ffffff 0%, #ffffff 52%);
  box-shadow: 0px 2px 15px 0px rgba(228, 232, 241, 1);
  border-radius: 9.23px;
  margin: 19px 0 0 10px;
}
.card-content .rightBtn {
  width: 37px;
  height: 100%;
  padding: 5% 10px;
  float: left;
  background-image: linear-gradient(13deg, #ffffff 0%, #ffffff 52%);
  box-shadow: 0px 2px 15px 0px rgba(228, 232, 241, 1);
  border-radius: 9.23px;
  margin: 19px 10px 0 0px;
}
.el-card__header {
  border-bottom: none !important;
  padding: 14px 15px 0px;
}
.card-content .el-card__body {
  padding: 0px 18px 0px 15px;
}
/*.el-checkbox__inner {*/
/* border-radius: 50%;*/
/*}*/

.el-carousel__item h3 {
  font-size: 18px;
  opacity: 0.75;
  line-height: 500px;
  margin: 0;
}
.el-carousel__container {
  height: 500px !important;
}
/* .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
} */

#el-card-index {
  transition: transform 0.3s ease;
}

.card-content #el-card-index:hover {
  transform: scale(1.1);
}
.el-carousel__indicators--horizontal {
  display: none;
}
.toUp {
  transform: all 1s;
}
.autoWidth .el-select__tags > span .el-tag:first-child {
  width: 60%;
}
.tableIndex .el-table__row td:nth-child(1) {
  text-align: center !important;
}
.tableIndex .el-table__row td:nth-child(2) {
  text-align: center !important;
}
.tableIndex .el-table__row td:nth-child(5) {
  text-align: center !important;
}
.tableIndex .el-table__row td:nth-child(6) {
  text-align: center !important;
}
.tableIndex .el-table__row td:nth-child(7) {
  text-align: center !important;
}
.tableIndex .el-table__row td:nth-child(9) {
  text-align: center !important;
}
.tableIndex .el-table__row td:nth-child(3) {
  text-indent: 1em;
}
.tableIndex .el-table__row td:nth-child(4) {
  text-indent: 1em;
}
.tableIndex .el-table__row td:nth-child(8) {
  text-indent: 1em;
}
.tableIndex .has-gutter th:nth-child(3) {
  text-align: left !important;
}
.tableIndex .has-gutter th:nth-child(4) {
  text-align: left !important;
}
.tableIndex .has-gutter th:nth-child(8) {
  text-align: left !important;
}
.tableIndex .warning-row {
  background: #fde6e6 !important;
}
.tableIndex .el-table__row td {
  background: transparent !important;
}
/* .el-select__tags-text{
  width: 80px;
}  */
/*//.el-table__cell{*/
/*//border: 1px solid #e6e2e2;*/
/*//padding: 15px 0;*/
/*//}*/
/*//.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell{*/
/*//  border-bottom: 1px solid #ffffff;*/
/*//}*/

/* .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  } */
</style>
<!--
<style scoped lang="scss">
.app-containers {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
  padding: 10px;
}

.cotainer_box1 {
  overflow: hidden;
  width: 69%;
  background-color: #ffffff;
  height: 450px;
  margin-top: 10px;

  .cotainer_VIP {
    width: 95px;
    height: 30px;
    border: 2px solid #2259f0;
    border-radius: 7px;
    padding: 3px;

    span {
      color: #ffffff;
      background: #2459f3;
      display: block;
      border-radius: 7px;
      width: 85px;
      font-size: 14px;
      text-align: center;
    }
  }
}

.cotainer_box2 {
  width: 29%;
  //padding-top: 20%;
  background-color: #ffffff;
  margin-top: 10px;
  padding: 10px;
  height: 450px;
  .cotainer_box2_box1 {
    width: 100%;
    height: 400px;
    background: #f4f7ff;
    margin-top: 10px;
    border-radius: 15px;
  }
  .cotainer_box2_box {
    width: 100%;
    height: 400px;
    background: #f4f7ff;
    margin-top: 30px;
    border-radius: 15px;
    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      list-style: none;
      padding: 5px;
      li {
        width: 32%;
        height: 120px;
        background: #e0e8fb;
        margin-top: 7px;
        border-radius: 15px;
        text-align: center;
        i {
          height: 40px;
          margin-top: 20px;
          color: #4372ef;
          font-size: 45px;
        }
      }
    }
  }
}

.el-table {
  height: 100%;
}

</style> -->
